<template>
  <div class="vs-code-menu" :class="{ checked: checkedId === data.id }">
    <div class="menu-title" @click.stop="handleOpen">
      <div class="icon">
        <svg v-if="data.kind === 'directory'" aria-hidden="true">
          <use :href="`#${isOpen ? 'wos-folder-open' : 'wos-folder-close'}`" />
        </svg>
        <vs-code-icon v-else :name="data.name" />
      </div>
      {{ data.name }}
    </div>
    <template v-if="data.children?.length && isOpen">
      <div v-for="item in data.children" :key="item.name" class="vs-code-menu-item">
        <vs-code-menu :data="item" :checked-id="checkedId" @checked-file="$emit('checkedFile', $event)" />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import VsCodeIcon from '@/components/systemWindow/vsCode/vsCodeIcon.vue'
import { defineComponent, ref } from 'vue'
import type { PropType } from 'vue'
import type { ShowDirectoryPicker } from '@/types/window.d'

export default defineComponent({
  name: 'vsCodeMenu',
  components: { VsCodeIcon },
  props: {
    checkedId: {
      type: String as PropType<string>,
      default: ''
    },
    data: {
      type: Object as PropType<ShowDirectoryPicker>,
      required: true
    },
    open: {
      type: Boolean as PropType<boolean>,
      default: false
    }
  },
  emits: ['checkedFile'],
  setup(props, ctx) {
    const isOpen = ref<boolean>(props.open)

    const handleOpen = async () => {
      isOpen.value = !isOpen.value
      if (props.data.kind === 'file') {
        ctx.emit('checkedFile', props.data)
      }
    }

    return {
      isOpen,
      handleOpen
    }
  }
})
</script>

<style scoped lang="scss">
.vs-code-menu {
  padding-left: 20px;
  line-height: 28px;

  &.checked .menu-title {
    color: rgb(120, 200, 162);
    background-color: rgb(27, 27, 27);
  }

  .menu-title {
    cursor: pointer;
    position: relative;
    white-space: nowrap;

    &:hover {
      color: #fff;
    }

    .icon {
      width: 20px;
      height: 100%;
      position: absolute;
      left: -20px;

      svg {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
}
</style>
